<template>
<el-dialog  width="35%" v-model="dialogVisible" :modal="true" @closed="finalThings" title="设置提现密码">
    <el-form :rules="rules" ref="elForm" :model="data" label-width="100">
            <el-form-item label="密码: " prop="password">
                <el-input :type="isChrome?'text':'password'"
                autocomplete="off" 
                v-model="data.password"
                style="-webkit-text-security:disc;"
                ></el-input>
            </el-form-item>
            <el-form-item label="重复密码: " prop="repassword">
                <el-input :type="isChrome?'text':'password'"
                autocomplete="off" 
                v-model="data.repassword" 
                style="-webkit-text-security:disc;"
                ></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="onSure">保存</el-button>
            <el-button @click="onCancel">取消</el-button>
        </template>
</el-dialog>
</template>         
<script>
import { reactive, toRefs,computed } from "vue";
import { repasswordValidator } from '~/uiframe/validator'
import { ElMessage } from 'element-plus';
import axios from "axios";

export default {
    props:{
        q:Object,
        _compId:Number,
        done:Function,
        payload: Object
    },
    mounted() {
        let nav = window.navigator.userAgent
        if (nav.includes('chrome')>-1){
            this.isChrome = true
        } else {
            this.isChrome = false
        }
    },
    setup(props) {
        let data = reactive({
            dialogVisible:true,
            data:[],
            elForm:null,
            isChrome:true,
            rules:{
                password:[{required:true,message:'提现密码必填', trigger:'blur'}],
                repassword:[
                    {required:true,message:'重复密码必填',trigger:'blur'},
                    {trigger:'blur', validator: repasswordValidator, compareTo:computed(()=>data.data.password)}
                ],
            }
        });

        const onmessage = (msg) => { ElMessage({ type: msg.success ? 'success' : 'error', message: msg.message }) },
        methods = {
            onCancel:()=>data.dialogVisible = false,
            finalThings:()=>{props.done(props._compId)},
            onSure:()=> {
                data.elForm.validate().then((ret) => {
                    if(!ret) return;

                    let d= data.data;
                    axios.post('/netbar/setPassword',{password:d.password,repassword:d.repassword}).then(({ status, data:res })=>{
                        onmessage(res)
                        if(res.success){
                            props.q.resolve({success:true,message:'已保存', data: []})
                            data.dialogVisible = false;
                        }
                    }).catch(res=>{
                        onmessage(res)
                    })
                })
            }
        }

        return {
            ...toRefs(data),
            ...methods
        }
    },
}
</script>
